<template>
  <!-- 分类页面主体 -->
  <div class="index">
    <!-- 
      van-tree-select，TreeSelect 分类选择
      :items，绑定数据([{ text: '分组 1' }, { text: '分组 2' }],text即为一级分类显示的文字)
      :main-active-index.sync，选中的一级分类
      @click-nav，点击一级分类时触发，得到一级分类索引
    -->
    <van-tree-select
      height="150vw"
      :items="items"
      :main-active-index.sync="active"
      @click-nav="activeItem"
    >
      <!-- 
        template slot="content"，固定写法，二级分类显示的插槽
      -->
      <template slot="content">
        <van-image :src="bannerImg" class="banner_img" round />
        <!-- 计算属性用了才能生效 -->

        <!-- 
          van-grid，宫格
          :column-num，一行显示3列
        -->
        <van-grid :column-num="3">
          <van-grid-item
            @click="getIndex(index)"
            v-for="(item,index) in subCategoryList"
            :key="item.id"
            :to="'/category/'+item.id"
            class="grid_items1"
          >
            <van-image lazy-load :src="item.wap_banner_url" />
            <h5>{{item.name}}</h5>
          </van-grid-item>
        </van-grid>
      </template>
    </van-tree-select>
  </div>
</template>
<script>
// 导入网络封装模块
import { request } from "@/axios/request";
export default {
  name: "categoryIndex",
  data() {
    return {
      // 一级分类绑定的数据
      items: [],
      // 选中的一级分类
      active: 0,
      // 得到一级分类每一项的id
      itemsId: 1005000,
      // 二级分类绑定的数据
      subCategoryList: [],
      // 二级分类顶部的圆形图片
      bannerImg: ""
    };
  },
  methods: {
    // 点击一级分类项时触发，得到索引
    activeItem(index) {
      // 得到一级分类每一项的id
      let id = this.items[index].id;

      this.itemsId = id;
      request({
        url: "catalog/current",
        params: { id: this.itemsId }
      })
        .then(res => {
          this.subCategoryList = res.data.currentCategory.subCategoryList;
        })
        .catch(err => {
          console.log(err);
        });

      // 得到圆形图片
      this.bannerImg = this.items[index].img_url;
    },
    // 得到当前点击的二级分类索引，与下一页的tabs的头部做关联
    getIndex(index) {
      // vuex共享状态，共享index
      this.$store.commit("replaceIndex", index);
    }
  },

  created() {
    request({
      url: "catalog/index"
    })
      .then(res => {
        // console.log(res);
        let data = res.data.categoryList;
        for (let item of data) {
          item.text = item.name;
        }
        this.items = data;
        this.bannerImg = this.items[0].img_url;
        // console.log(data);
        request({
          url: "catalog/current",
          params: { id: this.itemsId }
        })
          .then(res => {
            this.subCategoryList = res.data.currentCategory.subCategoryList;
            // console.log(this.subCategoryList);
          })
          .catch(err => {
            console.log(err);
          });
      })
      .catch(err => {
        console.log(err);
      });
  }
};
</script>
<style lang="less" scoped>
.van-tree-select__nav-item {
  padding-right: 0;
}
.banner_img {
  height: 100px;
}
.grid_items1 {
  h5 {
    margin-top: 0;
  }
}
</style>